<template>
  <div class="middle-block">
    <left-tree
      :treeData="treeData"
      @funSelectNode="SelectNode"
      :selectedKeys="selectedKeys"
      :expandedKeys="selectedKeys"
    ></left-tree>
    <a-card class="card-mind-chart">
      <mind-chart
        :data-source="mindDataSource"
        @reloadChart="getTreeData"
        :statusEnum="statusEnum"
        :getHistoryList="getHistoryList"
        :initChartData="initChartData"
      ></mind-chart>
    </a-card>
    <a-card>
      <describe @initChartData="initChartData" @refreshChart="refreshChart"></describe>
    </a-card>
  </div>
  <Detail ref="healthFault"></Detail>
</template>

<script setup>
import { ref, toRefs, reactive, onMounted, onBeforeUnmount, getCurrentInstance, nextTick } from 'vue'
import { useHealthStoreHook, useHealthStore } from '@/store/modules/health'
import { apiHealth } from '@/api/health'
import { apiFault } from '@/api/fault'
import LeftTree from '@/components/leftTree/index.vue'
import MindChart from '@/components/chart/MindChart.vue'
import Describe from '@/views/health/Describe.vue'
import Detail from '../faultEffect/detail.vue'
const { changeDescribeContent, changetimeAxisId, changeSatelliteName, changeSatelliteId } = useHealthStoreHook()
const { satelliteId } = toRefs(useHealthStore())
const { proxy } = getCurrentInstance()
const scroll = {
  y: '100%'
}
const treeData = ref([])
const mindDataSource = reactive({
  list: []
})
const list = ref([])
const treeDefaultValue = ref([])
const childrenValue = ref([])
const childrenDefaultValue = ref([])
const resetChildrenTree = ref([])
const selectedKeys = ref('')
const chartType = ref(0)
const typeCharts = ref(null)
const healthFault = ref(null)
const statusEnum = ref([
  {
    label: '健康',
    describe: '健康 90～100',
    color: '#4CFF00'
  },
  {
    label: '良好',
    describe: '良好 80～89',
    color: '#00F7FF'
  },
  {
    label: '堪用',
    describe: '堪用 60～79',
    color: '#FFBF00'
  },
  {
    label: '失效',
    describe: '失效 0～59',
    color: '#FF0000'
  }
])
const chartObj = ref({
  healthDeepTimeList: [],
  functionalTimeList: [],
  performanceTimeList: [],
  healthDeepData: {},
  functionalDataList: [],
  performanceDataList: []
})
const option = reactive({
  tooltip: {
    trigger: 'item',
    backgroundColor: '#666',
    borderColor: '#666',
    textStyle: {
      color: '#fff'
    },
    axisPointer: {
      type: 'shadow'
    }
  },
  grid: {
    top: '12%',
    left: '3%',
    right: '3%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: [],
    axisLabel: {
      show: true,
      color: '#ffffff'
    }
  },
  yAxis: {
    type: 'value',
    axisLabel: {
      show: true,
      color: '#ffffff'
    }
  },
  series: []
})
const openHealthFault = (data) => {
  healthFault.value.openDetailVisible(false, data.id)
}
// 获取左侧treedata
const getTreeData = () => {
  treeDefaultValue.value = []
  selectedKeys.value = ''
  apiFault.getEquipNodeTree().then((res) => {
    if (+res.code === 200) {
      treeData.value = res.data
      getDefaultTreeValue(treeData.value, treeDefaultValue.value)
      if (satelliteId.value) {
        selectedKeys.value = satelliteId.value
      } else {
        selectedKeys.value = treeDefaultValue.value.slice(-1)[0].id
        changeSatelliteId(selectedKeys.value)
      }
      changetimeAxisId(selectedKeys.value)
      getHealthChildrenNodeTree(selectedKeys.value)
      getHistoryList(selectedKeys.value)
      initChartData(selectedKeys.value)
      changeSatelliteName(treeDefaultValue.value.slice(-1)[0].nodeName)
      changeDescribeContent(treeDefaultValue.value.slice(-1)[0])
    }
  })
}
// 获取tree 子节点
const getHealthChildrenNodeTree = (data) => {
  mindDataSource.list = []
  apiHealth.getChildrenNodeTree(data).then((res) => {
    if (+res.code === 200) {
      childrenDefaultValue.value = []
      childrenValue.value = []
      resetChildrenTree.value[0] = res.data
      mindDataSource.list = res.data
      childrenValue.value.push(res.data)
      getDefaultTreeValue(childrenValue.value, childrenDefaultValue.value)
    }
  })
}
const SelectNode = (param, e) => {
  changetimeAxisId(e?.node?.id)
  getHealthChildrenNodeTree(e?.node.id)
  getHistoryList(e?.node?.id)
  initChartData(e?.node?.id)
  changeSatelliteId(e?.node?.id)
  changeDescribeContent(e?.node)
}
const getDefaultTreeValue = (treeData, data) => {
  const getId = (tree) => {
    tree.forEach((item, index) => {
      if (index === 0) {
        data.push(item)
        item.childList?.length > 0 && getId(item.childList)
      }
    })
  }
  getId(treeData)
  return data
}
const getHistoryList = (id) => {
  // todo
  /* apiFault.getHistoryList({ nodeId: id, page: 1, size: 10 }).then((res) => {
    if (+res.code === 200) {
      res?.data?.list.forEach((item, index) => {
        item.key = index + 1
      })
      list.value = res.data?.list
    }
  }) */
}
const charts = null
const initChart = () => {
  /* if (charts != null && charts !== '' && charts !== undefined) {
    charts.dispose()
  }
  charts = proxy.$echarts.init(typeCharts.value)
  changeChartType(chartType.value) */
}
const changeChartType = (data = 1) => {
  charts.clear()
  option.series = []
  option.xAxis.data = []
  if (+data === 0) {
    option.xAxis.data = chartObj.value?.healthDeepTimeList || []
    option.series = [
      {
        data: chartObj.value.healthDeepData?.dataInfo || [],
        name: chartObj.value.healthDeepData?.name || '',
        type: 'line'
      }
    ]
  } else if (+data === 1) {
    option.xAxis.data = chartObj.value?.functionalTimeList || []
    chartObj.value?.functionalDataList?.forEach((item) => {
      option.series.push({
        type: 'line',
        data: item.dataInfo,
        name: item.name
      })
    })
  } else if (+data === 2) {
    option.xAxis.data = chartObj.value?.performanceTimeList || []
    chartObj.value?.performanceDataList?.forEach((item) => {
      option.series.push({
        type: 'line',
        data: item.dataInfo,
        name: item.name
      })
    })
  }
  charts?.setOption(option)
}
// 刷新列表
const refreshChart = () => {
  getHealthChildrenNodeTree(satelliteId.value)
}
const initChartData = (id) => {
  // todo
  /* apiHealth.getIndexCurveData(id).then((res) => {
    if (+res.code === 200) {
      chartObj.value = res.data
      initChart()
    }
  }) */
}
onMounted(() => {
  getTreeData()
  /* nextTick(() => {
    initChart()
  }) */
})
onBeforeUnmount(() => {
  changetimeAxisId('')
})
</script>

<style lang="less" scoped>
.middle-block {
  width: 100%;
  height: 100%;
  color: #fff;
  display: flex;
  gap: 12px;

  .leftTree {
    width: 220px;
  }

  :deep(.arco-card-body) {
    height: 100%;
  }
  .card-mind-chart {
    flex: 1;
    width: calc(100% - 220px - 294px);
    height: 100%;
  }
}
</style>
